<template>
  <div class="fuzhi">
    <div class="fuzhi-top">
      <img src="../image/saoma_icon_fanhui.png" alt="" @click="$router.push({name:'index'})" />
      <p>测肤提醒</p>
    </div>
    <div class="fuzhi-main">
      <h1>添加测肤提醒，追踪肤质变化，就能及时调 整护肤方向～</h1>
      <p>·肤质会随着气温环境、护肤行为等的改变而变化， 所以要经常测肤哦～</p>
      <span>·有了我的提醒，就不容易忘记啦～</span>
    </div>
    <img src="../image/WechatIMG896.png" alt="">
    <!-- <van-cell is-link title="基础用法" @click="show = true" /> -->
    <button @click="show = true">+ 添加第一个提醒</button>
    <van-action-sheet v-model="show">
        <div class="content">
            <div class="content-top">
                <p @click="show = false">取消</p>
                <p>确定</p>
            </div>
             
            <div class="content-con">
               <h2>每周哪几天提醒呢？</h2>
              <label><input checked name="p" type="radio" class="day"><span>每天</span></label>
              <label><input name="p" type="radio" ><span>工作日</span></label>
              <label><input name="p" type="radio" class="sunday"><span>周末</span></label>
              <label><input name="p" type="radio"><span>自定义</span></label>  
            </div>
            <div class="content-main">
              <p>周一</p>
              <p>周二</p>
              <p>周三</p>
              <p>周四</p>
              <p>周五</p>
              <p>周六</p>
              <p>周日</p>
            </div>
            <div class="content-footer">
              <h2>什么时间提醒呢？</h2>
              <ul class="content-shang">
                <li>上午</li>
                <li>18</li>
                <li>45</li>
              </ul>
              <ul class="content-xia">
                <li>下午</li>
                <li>19</li>
                <li>50</li>
                <li class="xia-two">20</li>
                <li class="xia-fir">55</li>
              </ul>
              <div class="dise"></div>
            </div>
        </div>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isshow:true,
            show: false,
        }
    },
    methods:{
      onLog(){
        console.log(this.isshow);
      }
    }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.fuzhi {
  box-sizing: border-box;
  padding-top: 103px;
  .fuzhi-top {
    margin-left: 43px;
    // border: 1px solid red;
    width: 400px;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      width: 136px;
      height: 48px;
      font-size: 34px;
      font-family: PingFangSC-Medium-, PingFangSC-Medium;
      font-weight: bold;
      color: #2f2f2f;
      // line-height: 13px;
    }
    img {
      width: 12px;
      height: 24px;
      margin-left: 0;
    }
  }
  .fuzhi-main{
    margin-left: 52px;
    margin-top: 58px;
    h1{
        width: 646px;
        height: 90px;
        font-size: 34px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 42px;
    }
    p{
        width: 630px;
        height: 82px;
        font-size: 28px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 42px;
        margin-top: 36px;
        margin-bottom: 36px;
    }
    span{
        width: 434px;
        height: 40px;
        font-size: 28px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 42px;
        display: block;
        margin-bottom: 126px;
    }
  }
  img{
    width: 630px;
    height: 386px;
    margin-left: 60px;
  }
  button{
    width: 360px;
    height: 78px;
    background: #BBD2F4;
    border-radius: 46px 46px 46px 46px;
    opacity: 1;
    border: none;
    font-size: 28px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 78px;
    margin-left: 195px;
    margin-top: 386px;
  }
  .content {
    padding: 16px 16px 1400px;
    .content-footer{
      margin-top: 99px;
      margin-left: 33px;
      
      .dise{
        width: 710px;
        height: 74px;
        background: #F2F2F2;
        border-radius: 12px 12px 12px 12px;
        opacity: 1;
        margin-left: -25px;
        margin-top: -180px;
      }
      .content-xia{
        width: 358px;
        // border: 1px solid;
        font-size: 32px;
        margin-left: 80px;
        // background: #999999;
        margin-top: 41px;
        display: flex;
        justify-content: space-between;
         
        flex-wrap: wrap;
        .xia-two{
          margin-left: 128px;
          color: #999999;
          
        }
        .xia-fir{
          color: #999999;
        }

        li{
          // border: 1px solid;
          width: 100px;
          line-height:40px ;

          margin-bottom: 20px;
          margin-top: 41px;
        }
      }
      .content-shang{
        // border: 1px solid;
        display: flex;
        width: 358px;
        justify-content: space-between;
        align-items: center;
        margin-left: 80px;
        font-size: 32px;
        color: #999999;;
        font-family: PingFang SC-Regular, PingFang SC;
        margin-top: 44px;
        li{
          width: 100px;
          // border: 1px solid;
        }
      }
      h2{
        font-weight: bold;
        font-size: 34px;
      font-family: PingFangSC-Medium-, PingFangSC-Medium;
      
      color: #2F2F2F;
      }
    }
    .content-main{
      display: flex;
      // border: 1px solid;
      width: 700px;
      margin-left: 10px;
      // margin-right: 25px;
      justify-content: space-between;
      align-items: center;
      p{
        // margin-right: 30px;
        // margin-left: 30px;
        // margin-top: 83px;
        text-align: center;
        line-height: 76px;
        width: 76px;
      height: 76px;
      color: #fff;
      background: #BBD2F4;
      border-radius: 100px;
      }
    }
  .content-con{
   
// height: 48px;
margin-bottom: 83px;

font-family: PingFangSC-Medium-, PingFangSC-Medium;
font-weight: normal;
color: #2F2F2F;

span{
  margin-left: 10px;
  font-size: 22px;
}
input{
  margin-top: 68px;
  margin-left: 60px;
  width: 20px;
  height: 20px;
  line-height: 20px;

}
.day{
  margin-left: 95px;
}

h2{
  margin-top: 52px;
  margin-left: 33px;
  font-size: 34px;
}
  }
    .content-top{
        height: 43px;
        margin-top: 43px;
        display: flex;
        justify-content: space-around;
        line-height: 43px;
        p{
            font-size: 28px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #2F2F2F;
        }
    }
  }
}
</style>